<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>{$Think.config.site.title} - 主页</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <meta name="description" content="{$Think.config.site.description}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.css?v=4.1.0" rel="stylesheet">
</head>
<style type="text/css">
.row1{ margin-top: 135px; }
</style>
<style>.layer-date{ width: 240px; padding:0px 12px; position: relative; top:-9px;}</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <p id="buttons">
                　{:lang('请选择要查询的日期')}　
                <button type="button" {if condition="$time eq 'thismonth'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thismonth">{:lang('本月')}</button>　
                <button type="button" {if condition="$time eq 'thisweek'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thisweek">{:lang('本周')}</button>　
                <button type="button" {if condition="$time eq 'today'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="today">{:lang('今天')}</button>　
                <button type="button" {if condition="$time eq 'yesterday'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="yesterday">{:lang('昨天')}</button>　
                <button type="button" {if condition="$time eq 'lastmonth'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="lastmonth">{:lang('上月')}</button>　
                <button type="button" {if condition="$time eq 'thisyear'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thisyear">{:lang('今年')}</button>　
                <button type="button" {if condition="$time eq 'lastyear'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="lastyear">{:lang('去年')}</button>
                <form action="" id="myForm" method="post">
                    <input type="hidden" value="" id="time" name="time">
                </form>
            </p>
            <p>&nbsp;</p>
            <form method="post" action="" id="custom" style="margin-top:10px;" >
                　　<input class="form-control layer-date" name="starttime" id="kaishi" value="{$kaishitime ?? ''}" placeholder="{:lang('开始时间')}" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">　<input class="form-control layer-date" value="{$jieshutime ?? ''}" name="endtime" id="jieshu" autocomplete="off" placeholder="{:lang('结束时间')}" autocomplete="off" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">　<button type="button" class="btn btn-outline btn-primary" id="search" >{:lang('提交')}</button>
            </form>
        </div>
        <!-- 充值统计 -->
        <div class="row">
            <div id="graphic" class="col-md-12">
                <div id="rechargeorder" class="main"></div>
                <div>
                     <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px; " id="order" ></div>
                     </div>
                </div>
            </div>
        </div>
        <br/>
       <hr>
        <!-- 租还统计 -->
        <div class="row row1" >
            <div class="col-md-12">
                <div id="leaseorder" class="main"></div>
                <div>
                     <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="leaseorders"></div>
                     </div>
                </div>
            </div>
        </div> 
        <hr> 
        <!-- 充值押金统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="depositRecharge" class="main"></div>
                <div>
                     <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="deposit"></div>
                     </div>
                </div>
            </div>
        </div>
        <hr>  
        <!-- 押金退还统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="refunds" class="main"></div>
                <div>
                     <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="refund"></div>
                     </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 新增用户统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="user" class="main"></div>
                <div>
                     <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="users" ></div>
                     </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 商家统计 -->
        <div class="row row1">
            <div class="col-md-12">
                <div id="seller" class="main"></div>
                <div>
                     <div class="flot-chart">
                        <div class="flot-chart-content"  style=" height:350px;" id="sellers" ></div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>

    <script type="text/javascript">
$(function(){
        $("#buttons button").click(function(){
                $("#buttons button").removeClass('btn btn-primary');
                $("#buttons button").addClass('btn btn-outline btn-primary');
                $(this).addClass('btn btn-primary');
                var time = $(this).data("id");
                //alert(a);
                $('#time').val(time);
                $('#myForm').submit();
            });
        $('#search').click(function(){
            var strat = $('#kaishi').val();
            var end = $('#jieshu').val();
            if(strat==''){
                $('#kaishi').attr('placeholder',"{:lang('请选择开始时间')}");
                $('#kaishi').focus();
                return false;
            }else if(end==''){
               $('#jieshu').attr('placeholder',"{:lang('请选择结束时间')}");
               $('#jieshu').focus();
               return false;
            }

            $('#custom').submit();

        });

        });
</script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.6"></script>
    <!-- ECharts -->
    <script src="{$Think.config.site.resource_url}js/plugins/echarts/echarts-all.js"></script>
    <!-- 自定义js -->
    <script src="{$Think.config.site.resource_url}js/content.js?v=1.0.0"></script>
    <!-- ECharts demo data -->
    <script src="{$Think.config.site.resource_url}js/demo/echarts-demo.js"></script>
    <script type="text/javascript">
    var  rechargeorder = echarts.init(document.getElementById('order'));
    var leaseorders = echarts.init(document.getElementById('leaseorders'));
    var refund = echarts.init(document.getElementById('refund'));
    var sellers = echarts.init(document.getElementById('sellers'));
    var deposit = echarts.init(document.getElementById('deposit'));
    var user = echarts.init(document.getElementById('users'));
    //充值记录
    <?php
        if($time=='thismonth'){
            $title = lang('本月');
        }else if($time=='thisweek'){
            $title = lang('本周');
        }else if($time=='thisyear'){
            $title = lang('今年');
        }else if($time=='today'){
            $title = lang('今天');
        }else if($time=='yesterday'){
            $title = lang('昨天');
        }else if($time=='lastyear'){
            $title = lang('去年');
        }else if($time=='lastmonth'){
            $title = lang('上月');
        }else{
           $title = $time;
        }
    ?>
    option = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('充值金额')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('充值金额，总金额：')}{$data.sumrecharge}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="data.Recharge" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('充值金额')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="data.Recharge" id="v"}'{$v.amount} ', {/volist}]
        }
        
       ]
    };
    //租金金额
    option2 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('租金金额')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('租金额,总租金额：')}{$data.sumleaseorder}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="data.leaseorder" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'租金额',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#4EEE94'}}},
            data:[{volist name="data.leaseorder" id="v"}'{$v.amount} ', {/volist}]
        }
        
       ]
    };
    //客户退押金
    option3 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('客户退押金')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('客户退押金，总退押金金额：')}{$data.sumrefund}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="data.refund" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('客户退押金')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#3CB371'}}},
            data:[{volist name="data.refund" id="v"}'{$v.amount} ', {/volist}]
        }
        
       ]
    };
    //客户充值押金数
    option4 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('客户充值押金')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('客户充值押金,总充值押金金额：')}{$data.sumdepositRecharge}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="data.depositRecharge" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('客户充值押金')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#90EE90'}}},
            data:[{volist name="data.depositRecharge" id="v"}'{$v.deposit} ', {/volist}]
        }
        
       ]
    };
    //
    //新增用户统计
    option6 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('新增客户')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('新增客户，总客户数：')}{$data.countuser}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="data.user" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('新增客户')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#4EEE94'}}},
            data:[{volist name="data.user" id="v"}'{$v.count} ', {/volist}]
        }
        
       ]
    };
    //商户交易统计
    option7 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('商户交易')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('商户交易，总营交易额：')}{$data.sumsellers}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="data.sellers" id="v"}'{$v.name}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('商户交易')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="data.sellers" id="v"}'{$v.amount} ', {/volist}]
        }
        
       ]
    };


     rechargeorder.setOption(option);
     leaseorders.setOption(option2);
     refund.setOption(option3);
     deposit.setOption(option4);
     user.setOption(option6);
     sellers.setOption(option7);
</script>
<script src="{$Think.config.site.resource_url}js/plugins/layer/laydate/laydate.js"></script>
<script type="text/javascript">
        //外部js调用
        laydate({
            elem: '#hello', 
            //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>

</body>
</html>
